<template>
  <div>
    <div class="flex">
      <div v-for="(item, index) in charArr">
        <div v-if="index < charRenderCounter">
          <Transition
            appear
            name="textLoading"
          >
            <p>{{ `${item == " " ? "&nbsp" : item}` }}</p>
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(["content", "duration", "delay"]);
const emit = defineEmits(["loadComplete"]);
let charArr = [];
for (let i in props.content) {
  charArr.push(props.content[i]);
}
//定义一个计数器，ref代表这是一个代理类型
const charRenderCounter = ref(0);
const charRenderCounterIncrementAction: Function = (): boolean => {
  charRenderCounter.value += 1;
  if (charRenderCounter.value == charArr.length) {
    // emit("loadComplete")
    emit("loadComplete");
    return false;
  }
  setTimeout(() => {
    charRenderCounterIncrementAction();
  }, props.duration ?? 100);
  return true;
};
onMounted(async () => {
  await nextTick();
  setTimeout(() => {
    charRenderCounterIncrementAction();
  }, props.delay ?? 0);
});
</script>

<style>
.textLoading-enter-active {
  animation: textLoading-in 0.5s;
}
.textLoading-leave-active {
  animation: textLoading-in 0.5s reverse;
}
@keyframes textLoading-in {
  0% {
    transform: translateY(0.6rem);
    opacity: 0;
  }
  80% {
    transform: translateY(-0.1rem);
    opacity: 1;
  }
  100% {
    transform: translateY(0rem);
    /* opacity: 0; */
  }
}
</style>
